import React, { Component } from 'react';
import "../styles/views/Register.scss"

import { user_register } from '../api/index'
import { NavBar, Toast } from 'antd-mobile'

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = { phone: '', pass: '', agree: false }
    }
    handleChange(e) {
        this.setState({
            [e.target.name]: e.target.type == 'checkbox' ? e.target.checked : e.target.value
        })

    }
    back() {
        this.props.history.go(-1)
    }
    async register() {
        let res = await user_register({phone:this.state.phone, pass: this.state.pass})
        console.log(res);
        if (res.data.code===200) {
            Toast.show({content: '注册成功'})

            this.props.history.push('/login')
        }else{
            Toast.show({content: '注册失败'})
        }
    }
    render() {
        return (
            <div className='register'>
                <NavBar onBack={() => { this.back() }}>注册</NavBar>
                <div className="block">
                    <input name='phone' value={this.state.phone} onChange={(e) => { this.handleChange(e) }} type="text" placeholder='输入手机号' />
                </div>
                <div className="block">
                    <input name='pass' value={this.state.pass} onChange={(e) => { this.handleChange(e) }} type="text" placeholder='输入密码' />
                </div>
                <div className="block">
                    <input type="button" value="注册" onClick={() => { this.register() }} />
                </div>
            </div>
        );
    }
}

export default Register;